/* component */
import { RoleManagementViewHeaderRadio } from '@account/role/component/Header/components'
import UserBuyAndUseBar from '@account/role/component/UserBuyAndUseBar'
/* enum */
import ComponentNameEnum from '@model/enum/ComponentNameEnum'
/* hooks */
import { useStoreFetchRoleTree, useStoreMode } from '@account/role/store/hooks'
import { useRoleViewTenantBuyAndUseUserNum } from '@account/role/hooks'
/* model */
import LoginUser from '@model/entity/LoginUser/LoginUser'
/* scss */
import '@account/role/component/Header/index.scss'
/* vue */
import { ComponentInstance, computed, defineComponent, onBeforeMount, PropType, Ref, ref } from 'vue'
/* util */
import { isCustomerServiceCloudProductAndBusinessServiceCloudProduct } from '@shb-lib/tenant'

type RoleManagementViewHeaderColumnSlotDataType = { value: LoginUser }

export type RoleManagementViewHeaderProps = {

}

export interface RoleManagementViewHeaderSetupState {
  
}

export enum RoleManagementViewHeaderEventEnum {
  
}

export type RoleManagementViewHeaderEmitsOptions = {
  input: () => void;
}

export type RoleManagementViewHeaderMethodsOptions = {
  
}

export type RoleManagementViewHeaderInstance = ComponentInstance & RoleManagementViewHeaderSetupState
export type RoleManagementViewHeaderVM = RoleManagementViewHeaderSetupState & RoleManagementViewHeaderProps & ComponentInstance & RoleManagementViewHeaderMethodsOptions

export default defineComponent({
  name: ComponentNameEnum.RoleManagementViewHeader,
  setup(props: RoleManagementViewHeaderProps, { slots, emit }) {
    
    const { setUserViewMode } = useStoreMode()
    // 查询角色租户购买和使用用户数
    const { fetchRoleTenantBuyAndUseUserNumImpl } = useRoleViewTenantBuyAndUseUserNum()
    // 是否设置默认角色
    const isSetDefaultRole = true
    // 获取角色树
    const fetchRoleTree = useStoreFetchRoleTree(isSetDefaultRole)
    
    /**
     * @description 是否显示 radio
     */
    const isShowRadio: Ref<boolean> = computed(() => {
      return isCustomerServiceCloudProductAndBusinessServiceCloudProduct();
    })
    
    /** 
     * @description 切换产品事件
    */
    const onCurrentProductRadioChangeHandler = (value: string) => {
      fetchRoleTree()
      setUserViewMode()
      fetchRoleTenantBuyAndUseUserNumImpl()
    }
    
    return {
      isShowRadio,
      onCurrentProductRadioChangeHandler
    }
    
  },
  render(h) {
    return (
      <div class={ComponentNameEnum.RoleManagementViewHeader}>
        
        {this.isShowRadio && (
          <RoleManagementViewHeaderRadio 
            onInput={this.onCurrentProductRadioChangeHandler}
          />
        )}
        
        <UserBuyAndUseBar />
        
      </div>
    ) as any
  }
}) as any
